<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<script type="text/babel">

  const arrA = [1, 2, 3, 4]
  const arrB = arrA.map((item) => item * 2)
  console.log(123, arrB, arrB.toString());

  const itemList = arrA.map(item => <li>{item}</li>)

  // 函数组件 渲染列表 通过map 函数映射的方法 最后返回出一个列表
  function NumberList(props) {
    const number = props.number
    const itemList = number.map((item, index) => <li key={index}>{item}</li>)
    return <ul>{itemList}</ul>
  }

  // 数组元素中使用的key 在其兄弟节点之间应该是独一无二的 但他们之间不需要是全局唯一的 当我们生成两个不同的数组时 我们可以使用相同的key
  function Bolg(props) {
    const cpn1 = (
      <ul>
        {props.post.map((item) => <li key={item.id}>{item.title} {item.content}</li>)}
      </ul>
    )

    const cpn2 = props.post.map(item =>
      <div key={item.id}>
        <h2>{item.title}</h2>
        <p>{item.content}</p>
      </div>
    )

    return (
      <div>
        {cpn1}
        <hr />
        {cpn2}
      </div>
    )
  }
  const post = [
    { id: 1, title: '缘来', content: '你还好吗？' },
    { id: 2, title: '缘去', content: '爱笑的人运气不会差' }
  ]

  ReactDOM.render(
    <Bolg post={post} />, document.querySelector('#root')
  )

</script>